<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>众筹活动</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/LArea.min.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/flavr/css/flavr.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/appLogin.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/dialog/css/dialog.css" />
    <style>body{background: #EFEFF4}</style>
</head>

<!--crowd-funding-wrapper-->
<div class="crowd-funding-wrapper">
    <script type="text/html" id="tpl-fund">
        <!--title-->
        <div class="title">
            <h2>{{title}}</h2>
        </div>
        <!--/title-->
        <!--content-->
        <div class="content">
            <img src="{{theme_pic}}" alt="" />
        </div>
        <!--/content-->
        <ul class="little-nav" id="litNav">
            <li data-target="#intro" class="active">活动介绍</li>
            <li data-target="#liveRoom">互动直播</li>
        </ul>
        <!--panel-list-->
        <div class="panel-list">
            <!--panel-->
            <div id="intro" class="panel showIt">
                <ul class="list-info">
                    <li>
                        <h4>截止时间</h4>
                        <p>{{formatTime(end_time, 'YYYY/MM/DD HH:ii', false)}}</p>
                    </li>
                    <li>
                        <h4>目标金额</h4>
                        <p>{{dealAmount money}}元</p>
                    </li>
                    <li>
                        <h4>活动进展</h4>
                        <p class="tags">
                            <span>{{userNum}}人参与</span>
                            <span>{{formatDouble((amount / money) * 100, 2)}}%完成率</span>
                        </p>
                    </li>
                </ul>
                <ul class="crowd-progress">
                    {{if timeComp(start_time) > 0}}
                    <li class="">开启</li>
                    <li class="">众筹中</li>
                    <li class="">已结束</li>
                    {{else if timeComp(start_time) < 0 && timeComp(end_time) > 0}}
                    <li class="active">开启</li>
                    <li class="active">众筹中</li>
                    <li class="">已结束</li>
                    {{else}}
                    <li class="active">开启</li>
                    <li class="active">众筹中</li>
                    <li class="active">已结束</li>
                    {{/if}}
                </ul>
                <ul class="list-info">
                    <li>
                        <h4>活动说明</h4>
                        <p>{{#content}}</p>
                    </li>
                </ul>
            </div>
            <!--/panel-->
            <!--panel-->
            <div id="liveRoom" class="panel">
                <!--live-nav-->
                <div class="live-nav">
                    <div class="item" id="enterLive">
                        <div class="tit">视频直播</div>
                        <div class="cont">
                            {{if live_url}}
                            <p class="arrow" data-url="{{live_url}}">进入直播间</p>
                            {{else}}
                            <h4>暂无</h4>
                            {{/if}}
                        </div>
                    </div>
                    <div class="item apply" id="enterJoin">
                        <div class="tit">参与用户</div>
                        <div class="cont">
                            {{if userNum > 0}}
                            <p class="arrow">全部{{userNum}}人 </p>
                            <ol class="inline">
                                {{each users as value i}}
                                <li><a><img src="{{value.head_url}}" alt="" /></a></li>
                                {{/each}}
                            </ol>
                            {{else}}
                            <h4>暂无</h4>
                            {{/if}}
                        </div>
                    </div>
                </div>
                <!--/live-nav-->
                <!--comment-list-->
                <div class="comment-list" id="commentList">
                    <div class="title">
                        <h2>热门留言</h2>
                    </div>
                    <div class="content" id="commentWarp">
                        {{include 'tpl-comment' comment}}
                    </div>
                    <div class="more-box">
                        <a href="javascript:;" id="loadCommentMore">加载更多</a>
                    </div>
                </div>
                <!--/comment-list-->
            </div>
            <!--/panel-->
        </div>
    </script>
    <!--/panel-list-->
</div>
<!--/crowd-funding-wrapper-->

<!--detail-comment-area-->
<div class="detail-comment-area">
    <ul class="crowd-nav">
        <li id="payIt" class="half">我要支持</li>
        <li id="messages">留言</li>
        <li id="orderList">订单查询</li>
    </ul>
    <form action="#" method="post" class="upload-comment">
        <div class="btn-box">
            <button type="button" class="btn-cancel">取消</button>
            <button type="button" class="btn-submit">发布</button>
        </div>
        <textarea class="tta" rows="5" placeholder="请输入内容" id="inputComment"></textarea>
    </form>
    <div class="waterMark"></div>
</div>
<!--/detail-comment-area-->

<!--reward-wrap-->
<div class="reward-wrap" id="rewardWrap">
    <div class="top-thumb"><img src="<%=basePath%>/app/images/reward_top.png" alt="" /></div>
    <!--check-list-->
    <div class="check-list">
        <div class="inner">
            <div class="item active" data-price="5"><p>5元</p></div>
            <div class="item" data-price="10"><p>10元</p></div>
            <div class="item" data-price="20"><p>20元</p></div>
            <div class="item" data-price="50"><p>50元</p></div>
            <div class="item" data-price="100"><p>100元</p></div>
            <div class="item" data-price="200"><p>200元</p></div>
        </div>
    </div>
    <!--/check-list-->
    <!--price-box-->
    <div class="price-box">
        <a class="other-price">其他金额</a>
        <br />
        <input type="number" name="price" value="5" class="ipt-price" id="lastPrice" placeholder="请输入支持金额" />
    </div>
    <!--/price-box-->
    <!--button-box-->
    <div class="button-box">
        <button type="button" class="btn-submit">立即支持</button>
        <button type="button" class="btn-back">返回</button>
    </div>
    <!--/button-box-->
</div>
<!--/reward-wrap-->

<script type="text/html" id="tpl-comment">
    <!--comment-list-row-->
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('{{if value.head_url}}{{value.head_url}}{{else}}<%=basePath%>/app/images/defaultHead.png{{/if}}')"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <span class="time">{{formatTime value.create_time}}</span>
                <h3><span class="username">{{value.user_name}}</span></h3>
            </div>
            <div class="cont">
                <p>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    <!--/comment-list-row-->
    {{/each}}
</script>
<script type="text/javascript" src="<%=basePath%>/app/plugins/flavr/js/myFlavr.js"></script>
<script type="text/javascript">
    var _offset = 1, _total = 0;
    function addCommentEvent(){
        var _commentNav = mui('div.detail-comment-area');

        //- - - - - - - - - - 评论 - - - - - - - - - -
        var _isOpen = false, _commentFixed = 'comment-fixed', _commentHandle;

        function setTime(){
            _commentHandle = setInterval(function(){
                var _input = $('#inputComment');
                if('' == $.trim(_input.val())){
                    _input.focus();
                }
            }, 50);
        }

        //显示与隐藏 评论框
        function toggleCommentList(){
            var _comment$Nav = $(_commentNav[0]), _commentClass = 'comment';
            if(!_comment$Nav.hasClass(_commentClass)){
                _isOpen = true;
                _comment$Nav.addClass(_commentClass);
                $('html').addClass(_commentFixed);
                //setTime();
                setTimeout(function(){
                    $('#inputComment').focus();
                }, 200);
            }else{
                _isOpen = false;
                clearInterval(_commentHandle);
                _comment$Nav.removeClass(_commentClass);
                $('html').removeClass(_commentFixed);
                $('#inputComment').blur();
            }
        }

        _commentNav.on('tap', '#messages', function(){
            checkLogin(function () {
                toggleCommentList();
            },function () {
                initLogin(function () {
                    toggleCommentList();
                });
            });
        });

        //取消评论
        _commentNav.on('tap', '.btn-cancel', function(){
            toggleCommentList();
        });

        //发布评论
        _commentNav.on('tap', '.btn-submit', function(){
            //ajax do something...
            //toggleCommentList();    //关闭评论窗口
            $(this).attr("disabled", "disabled");
            var comment = $("#inputComment").val();
            if(isEmpty(comment)){
                mui.toast("请填写评论");
                return;
            }
            $.ajax({
                url: _basePath + "/app/act/commentMake",
                data: {
                    comment: comment,
                    interaction_id: ${id}
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        mui.toast("评论成功");
                        loadComment(0);
                    }else{
                        mui.toast(data['message']);
                    }
                    $("#inputComment").val("");
                    $(this).attr("disabled", false);
                    toggleCommentList();
                }
            });
        });

        //蒙板事件
        _commentNav.on('tap', '.waterMark', function(){
            toggleCommentList();        //关闭评论窗口
        });
    }

    function loadComment(offset) {
        $.ajax({
            url: _basePath + "app/act/commentList",
            data: {
                interaction_id: ${id},
                curPage: offset + 1
            },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tpl-comment', data.resultList);
                    if(offset == 0){
                        $("#commentWarp").html("");
                    }
                    $("#commentWarp").append(_html);
                    if(offset != 0){
                        _offset++;
                    }
                    _total = data.resultList.totalPage;
                }
            }
        })
    }


    function loadRewardEvent(){
        var _rewardWrap = $('#rewardWrap'), _list = _rewardWrap.find('.check-list .item'), _active = 'active';

        _list.on('tap', function(){
            _list.removeClass(_active);
            $(this).addClass(_active);
            $('#lastPrice').removeClass(_active).val($(this).data('price'));
        });

        //其他 金额
        _rewardWrap.on('tap', '.other-price', function(){
            _list.removeClass(_active);
            $('#lastPrice').val('').addClass(_active);
        });

        function validateMoney(money) {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!reg.test(money)) {
                mui.toast("金额格式不正确！")
                return false;
            }
            if (money <= 0 || money > 9999) {
                mui.toast("请输入0-9999的金额！")
                return false;
            }
            return true;
        }

        //立即打赏
        _rewardWrap.on('tap', 'button.btn-submit', function(){
            var amount = $('#lastPrice').val();
            if (validateMoney(amount)) {
                $.ajax({
                    url: _basePath + "app/act/fundOrder?id=${id}&amount=" + amount,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if(typeof data.resCode != undefined && data.resCode == 0){
                            mui.openWindow({
                                url: _basePath + data.resultList
                            });
                        } else if(data.resCode == 3){
                            initLogin(function () {
                                setTimeout(function () {
                                    mui.openWindow({
                                        url: _basePath + "app/page?pv=act_fund&id=${id}"
                                    });
                                }, 1000)
                            })
                        } else {
                            mui.toast(data['message']);
                        }
                    }
                })
            }
        });

        //返回
        _rewardWrap.on('tap', 'button.btn-back', function(){
            _rewardWrap.hide();
            $('html').removeClass('reward-fixed');
        });

        //默认第一个
        _list.eq(0).trigger('tap');
    }

    function openFund() {
        $('#rewardWrap').show();
        setTimeout(function(){
            $('html').addClass('reward-fixed');
        }, 200);
    }

    $(function(){

        $.ajax({
            url: _basePath + "app/act/fundDetail",
            data: {id: '${id}'},
            dataType: "json",
            success: function (data) {
                if(typeof data['resultList'] != undefined && data.resCode == 0){
                    var _html = template("tpl-fund", data['resultList']);
                    shareWx(window.location.href,data.resultList.theme_pic,data.resultList.title,data.resultList.title);
                    $(".crowd-funding-wrapper").html(_html);
                    addCommentEvent();
                    loadRewardEvent();
                }else{
                    mui.toast("该活动可能已经下线")
                }

            }
        });

        //加载更多评论列表
        $(document).on('tap', '#loadCommentMore', function(){
            if(_offset < _total){
                loadComment(_offset);
            }else{
                mui.toast("已经没有数据了");
            }
        });

        //板面切换
        $(document).on('tap', '#litNav li', function(){
            var _target = $(this).data('target'), _object = $(_target), _active = 'active', _show = 'showIt';

            if('undefined' !== typeof _object.get(0)){
                $('.panel-list .panel').removeClass(_show);
                _object.addClass(_show);

                $('#litNav li').removeClass(_active);
                $(this).addClass(_active);
            }
        });

        //进入直播间
        $(document).on('tap', '#enterLive', function(){
            var url = $(this).data("url");
            if(!isEmpty(url)){
                mui.openWindow({
                    url : url
                })
            }
        });

        //进入参与人员列表
        $(document).on('tap', '#enterJoin', function(){
            mui.openWindow({
                url : _basePath + "app/page?pv=act_fund_user&id=${id}"
            })
        });

        //我要支持
        $(document).on('tap', '#payIt', function(){
            checkLogin(function () {
                openFund();
            },function () {
                initLogin(function (dialog) {
                    dialog.hideDialog();
                    openFund();
                },{onLoad: "openFund"});
            });
        });

        //订单查询
        $(document).on('tap', '#orderList', function(){
            mui.openWindow({
                url : _basePath + "app/page?pv=act_fund_order&id=${id}"
            })
        });
    });
    

</script>